<template>
	<view class="container">
		<uv-popup ref="popup" mode="bottom" bgColor="none" @change="change" :overlayOpacity="0" zIndex="9">
			<view class="creact-box">
				<view class="creact-item creact-item-1" @click="goSC()">
					<!-- 'page_account/create/template' -->
					<view class="left">
						<view class="title">生成视频</view>
						<view class="title2">你的故事，AI来演绎，精准传达每个细节</view>
					</view>
					<view class="right">
						<image
							src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/e1c61bc5aaf64a61989bfc180220794b.png"
							mode="aspectFill" class="image-right"></image>
					</view>
				</view>
				<view class="creact-item" @click="goSC()">
					<!-- 'page_account/create/picture/material' -->
					<view class="left">
						<view class="title">生成点评素材</view>
						<view class="title2">智能生成，一键打造专属视频</view>
					</view>
					<view class="right">
						<image
							src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/13e2cb71a02a45d2956aabfd143a99a3.png"
							mode="aspectFill" class="image-right"></image>
					</view>
				</view>
				<view class="creact-item" @click="goSC('page_account/create/picture/addmaterial')">
					<view class="left">
						<view class="title">发布点评素材</view>
						<view class="title2">用点评传递真实，用体验定义选择</view>
					</view>
					<view class="right">
						<image
							src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/df3ebfb753fd4014ad797df1eccdec85.png"
							mode="aspectFill" class="image-right"></image>
					</view>
				</view>
				<view class="creact-item" @click="goSC('page_account/create/addvideo')">
					<view class="left">
						<view class="title">发布视频素材</view>
						<view class="title2">记录的不只是画面，更是每一份感动</view>
					</view>
					<view class="right">
						<image
							src="http://jy-nfc.oss-cn-hangzhou.aliyuncs.com/2024/12/26/839a43ce097e4d10b9565639abe1cd54.png"
							mode="aspectFill" class="image-right"></image>
					</view>
				</view>
				<view class="close" @click="close">
					<uv-icon name="close" color="#000" size="28"></uv-icon>
				</view>
			</view>
		</uv-popup>
		<!-- <button @click="open">打开</button> -->
	</view>
</template>

<script>
	const app = getApp();
	import {
		toast
	} from '@/utils/common';
	export default {
		data() {
			return {

			};
		},
		onShow() {
			uni.hideTabBar()
			this.$nextTick(() => {
				this.open()
			})
		},
		onHide() {
			uni.showTabBar()
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			goSC(url) {
				if (!url) {
					toast('暂未开放')
					return false
				}
				app.navigationTo(url)
			},
			change(e) {
				if (!e.show) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		width: 100vw;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #F1F5F8 95%);

		.creact-box {
			padding: 0 40rpx 38rpx 40rpx;


			.creact-item {
				width: 670rpx;
				height: 182rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 40rpx;
				border: 2rpx solid #FFFFFF;
				padding: 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&.creact-item-1 {
					background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
					color: #FFFFFF;
					border: 2rpx solid transparent;
				}

				.left {
					.title {
						font-weight: 700;
						font-size: 40rpx;
						color: #000000;
						line-height: 52rpx;
						margin-bottom: 16rpx;
					}

					.title2 {
						font-weight: 500;
						font-size: 24rpx;
						color: #000000;
						line-height: 34rpx;
						width: 326rpx;
					}
				}

				.right {
					.image-right {
						width: 188rpx;
						height: 170rpx;
					}
				}
			}

			.close {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 112rpx;
				height: 112rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				margin: 0 auto;
				margin-top: 60rpx;
			}
		}
	}
</style>